<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
       <style>
            html, body {
                height: 100%;
                margin: 0;
                overflow: hidden;
            }
/*             #detail {
                position: absolute;
                right: 0;
                top: 0;
                bottom: 0;
                width: 100%;
                background: #fff;
                transform: translate(100%);
                padding: 0px;
                padding-top: 0px;
            }
            #detail.active {
                transform: translate(0);
            }
            #detail .close {
                position: absolute;
                right: 20px;
                top: 40px;
                cursor: pointer;
            }
            #detail1 {
                height: 100%;
                width: 100%;
            } */
       </style>
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <div id="detail">
           <div id="detail1"></div>
           <div class="close">X</div>
       </div>
       <script type="text/javascript" src="js/echarts.js"></script>
       <script type="text/javascript" src="js/jquery.min.js"></script>
       <script type="text/javascript">
           var itemStyleActual = {
               normal: {
                   color: function(params) {
                       if(params.data == 546470 || params.data == 225560 || params.data == 34092 || params.data == 43172 || params.data == 69007 || params.data == 5673)
                           return '#CC3333';//超过预算
                       else if(params.data == 26790 || params.data == 95587 || params.data == 170929 || params.data == 95587 || params.data == 24768 || params.data == 3783)
                           return '#FF8B30';//即将超过预算
                       else
                           return '#999999';//正常
                   }
               }
           };
           var dom = document.getElementById("container");
           var myChart = echarts.init(dom);
           var myDtlChart;
           var dtlDom = document.getElementById('detail1');
           var app = {};
           option = null;
           option = {
               color:['#009966','#999999'],
               title: {
                   text: 'Police Department Budget'
               },
               tooltip: {
                   trigger: 'axis'
               },
               legend: {
                   data:['Budget','Actual'],
                   x: 'right'
               },
               grid: {
                   left: '3%',
                   right: '4%',
                   bottom: '3%',
                   containLabel: true
               },
               xAxis: {
                   type: 'category',
                   axisLabel:{
                       rotate:10,
                       interval:0
                   },
                   data: ['Auxiliary','Patrol','Animal Control','Canine','ERT','FTO','DISPATCH',
                          'Administration','Fleet Maintenance','Personnel and Training','AIS']
               },
               yAxis: {
                   type: 'value'
               },
               series: [
               {
                   name:'Budget',
                   type:'bar',
                   barGap:0,
                   stack: 'Budget',
                   data:[62677, 523660, 212260, 33095, 32438, 21794, 868033,
                         783759, 176399, 381435, 99484]
               },
               {
                   name:'Actual',
                   type:'bar',
                   barGap:0,
                   stack: 'Actual',
                   itemStyle: itemStyleActual,
                   data:[45200, 546470, 225560, 26790, 34092, 2870, 820937,
                         746276, 170929, 338002, 95587]
               }]
           };
           myChart.setOption(option, true);
           myChart.hideLoading();
           myChart.on('click', function (param) {
               if(param.name == "Personnel and Training"){
//                    window.location.href="policeDepartmentBudgetDtl.html";
                   window.open("http://localhost:8080/xc/m?xwl=xc/demo/chart/policeDepartmentBudgetDtl");
//                   myDtlChart = echarts.init(dtlDom);
//                   $(myDtlChart.getDom()).fadeIn(800);
//                   myDtlChart.resize();
//                   var dtlOption = {
//                       color:['#009966','#999999','#CC3333'],
//                       title: {
//                           text: 'Police Department Budget Details'
//                       },
//                       tooltip: {
//                           trigger: 'axis'
//                       },
//                       legend: {
//                           data:['Budget','Actual'],
//                           x: 'right'
//                       },
//                       grid: {
//                           left: '3%',
//                           right: '4%',
//                           bottom: '3%',
//                           containLabel: true
//                       },
//                       xAxis: {
//                           type: 'category',
//                           axisLabel:{
//                               rotate:20,
//                               interval:0
//                           },
//                           data: ['REGULAR SALARIES','SALARIES UNIFORM PERSONNE','OVERTIME','O/T-EDUCATION','O/T BACKGROUND INVESTIGAT','LONGEVITY',
//                                  'HOLIDAY PREMIUM PAY','EDUCATION STIPEND','SPECIAL DETAIL','SOCIAL SECURITY','MEDICARE','RETIREMENT',
//                                  'RET-POLICE OFFICER','COMPUTER/SOFTWARE MAINT','PROFESSIONAL SERVICES','PROF/SERV-HIRING','ADVERTISING','TRAINING-EDUCATION',
//                                  'DUES PROFESSIONAL ORGANIZ','TRAVEL AND CONFERENCE','MISCELLANEOUS SUPPLIES','MEETING SUPPLIES','OFFICE SUPPLIES','COMPUTER/PRINTER SUPPLIES',
//                                  'BOOKS & PERIODICALS','CLOTHING ALLOWANCE','CLOTHING','EQUIPMENT']
//                       },
//                       yAxis: {
//                           type: 'value'
//                       },
//                       series: [
//                           {
//                               name:'Budget',
//                               type:'bar',
//                               barGap:0,
//                               data:[10638, 42010, 68500, 61112, 10076, 1059, 
//                                     5659, 0, 1982, 3289, 3776, 3795, 
//                                     43741, 656, 3745, 7459, 547, 10404, 
//                                     265, 1561, 6792, 2200, 318, 0,
//                                     2081, 1521, 3279, 24970]
//                           },
//                           {
//                               name:'Actual',
//                               type:'bar',
//                               barGap:0,
//                               stack: 'Actual',
//                               itemStyle: itemStyleActual,
//                               data:[5954, 43172, 69007, 51659, 2133, 1187, 
//                                     5673, 0, 2006, 2551, 3290, 3783, 
//                                     39777, 0, 2550, 3155, 1500, 9119, 
//                                     330, 2897, 1457, 329, 333, 290,
//                                     525, 1522, 36, 24768]
//                           }
//                       ]
//                   };
//                   $('#detail').addClass('active');
//                   $('#all').show();
//                   myDtlChart.setOption(dtlOption,true);
               }
               else
                 alert("Select the data with no budget details");
           })
           $(window).resize(function () {
               myChart.resize();
           });
//            $('#detail .close').click(function () {
//                $('#detail').removeClass('active');
//                $(myDtlChart.getDom()).fadeOut(800);
//           });
       </script>
   </body>
</html>